.input-with-select {
  .el-input .el-input--suffix {
    background: #fff;
  }

  .el-input__wrapper {
    color: #2d2e33;
    @apply px-[12px] py-0;
  }

  .el-input-group__prepend {
    @apply bg-[#f7f8fa]  px-[20px];
  }

  .el-input-group__append {
    @apply w-[32px] bg-[#f7f8fa] px-0 cursor-pointer;

    .el-button {
      @apply w-[32px] flex justify-center;
    }
  }
}

.el-input__wrapper {
  @apply px-[12px] py-0;
}

// 输入框带单位
.input-number-with-suffix {
  @apply flex items-center;

  .input-prepend,
  .el-input-group--prepend {
    border: 1px solid #dbdde2;
    @apply px-[12px] bg-[#F7F8FA] rounded-[4px] rounded-r-none border-r-0 h-[30px] text-[#868D9D] text-center;

    letter-spacing: 0.47px;
  }

  .el-input-group__append {
    @apply px-[12px] bg-[#F7F8FA]  rounded-l-none border-l-0 h-[30px] text-[12px] text-[#868D9D] text-center;

    letter-spacing: 0.47px;
  }

  .el-input-number .el-input .el-input__wrapper {
    @apply rounded-l-none;

    .el-input__inner {
      text-align: left;
    }
  }
}

.input-number-with-select,
.input-number-with-append {
  @apply flex items-center;

  .el-input-number .el-input .el-input__wrapper {
    @apply rounded-r-none border-r-0;

    .el-input__inner {
      text-align: left;
    }
  }

  .el-select .el-input__wrapper,
  .input-append {
    @apply rounded-l-none  relative;

    background: #f9fafc;
  }

  .input-append {
    border-radius: 0 var(--el-input-border-radius, var(--el-border-radius-base))
      var(--el-input-border-radius, var(--el-border-radius-base)) 0;
    border: 1px solid #dfe2e5;
    border-left: none;
    text-align: center;
    font-size: 14px;
    color: #8f959e;
    font-weight: 400;
    height: 32px;
  }

  .el-input-number .el-input__wrapper.is-focus,
  .el-select .el-input__wrapper.is-focus {
    @apply relative z-10;
  }
}

.custom-multiple-select {
  .el-select__tags-text {
    max-width: 70px !important;
  }
}

.append-select {
  @apply flex items-center;

  .el-input-number {
    .el-input {
      .el-input__wrapper {
        border: 1px solid #dfe2e5;
        box-shadow: none !important;
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        border-right: none;
        height: 30px;

        .el-input__inner {
          text-align: left;
        }
      }

      &.is-focus {
        .el-input__wrapper {
          border-color: #d3d6d9;
          box-shadow: none !important;
        }
      }
    }
  }

  .el-select {
    .el-input__wrapper {
      @apply bg-white  rounded-[4px];

      border-top-left-radius: 0 !important;
      border-bottom-left-radius: 0 !important;
      border-left: none;
    }
  }

  .unit {
    @apply w-[36px] h-[30px] rounded-r-[4px] text-center leading-[30px] text-[12px] text-[#C5CBD8] bg-[#F7F8FA];

    border: 1px solid #dfe2e5;
  }

  &:hover:not(.el-select--disabled) {
    .el-input__wrapper {
      border-color: #d3d6d9;
    }
  }
}

// 全局select样式
.el-select .el-input__inner {
  font-size: 12px !important;
  color: #2d2e33;
}

.el-input-group__append div.el-select .el-input__wrapper {
  background-color: #fff !important;
}

.el-select__popper {
  .el-select-dropdown__list {
    .el-select-dropdown__item {
      @apply text-[12px] leading-[34px];
    }
  }
}
